<template>
    <view class="listBox">
        <view v-for="itemMo,idx in assFormtList" :key="idx" class="i-list">
            <view class="mark mb10">
                <text class="b">
                    {{ itemMo.expressName }}
                </text>
                <text class="mr5 fr">
                    {{itemMo.orderStatusStr}}
                </text>
            </view>
     
            <view @click="()=>handlerFunc('detail',itemMo)" class="content" >
                <view class="con-item">
                    <view class="imgBox text-center">
                        <!-- <image :src="item.pics"  mode="aspectFit" :lazy-load="true"></image> -->
                        <!-- {{itemMo.orderStatusStr}} -->
                        <text class=" iconfont ico " :class="itemMo.orderIcon" >
                            
                        </text>
                          
                    </view>
                    <view class="right">
                        <view class="tname"  >
                            <text class="name" v-for="item in itemMo.orderExpressModelList" :key="item.id">{{ item.pickUpCode }} 
                                <text class="hao">;</text>
                            </text>
                        </view>
                      
                        <!-- <view class="remark" v-if=" item.remark ">
                            <view>
                                <text>备注:</text> <text class="col ml5">{{ item.remark }}</text>
                            </view>
                        </view> -->

                        <view>
                            <view class="timeDate">
                            <!-- <text class="col-warn mr5">
                                {{itemMo.orderStatusStr}}
                            </text> -->
                                <view>
                                    <text class="iconfont icon-yuyue icon mr5 f30"></text> 
                                    <text class="col-hui">{{ itemMo.appointDateStr }}</text>     
                                </view>
                                
                                <text class="col-hui ">共{{ itemMo.orderExpressModelList.length }}件</text>   
                            </view>
                        </view>
                    </view>
                    
                </view>
            </view>
            
              

            <view class="btns-box" v-if="handle">

                <!-- v-if=" item.orderStatus == 15 " -->
                <!-- <text class="btn update" v-if=" itemMo.orderStatus == 15 " @click.stop="()=>handlerFunc('start',itemMo)">开始配送</text> -->
                <!-- v-if=" item.orderStatus == 20 " -->
                <!-- <text class="btn pay" @click.stop="handlerFunc('end',item)">配送完成</text> -->
                <!-- <text  class="btn report" bindtap='handleSureReport' data-item='{{item}}'>确认报件</text> -->
            </view>
        </view>
    </view>

</template>

<script>
import { errorExpressImg } from '../../utils/configDIct.js'
import { statusList } from '../../utils/configDIct.js'
import { parseTime } from '../../utils/tools'
export default {
    props: ['listData', 'handle'],
    data () {
        return {
            assFormtList: []
        }
    },
    computed: {

    },

    watch: {
        listData: {
            deep: true,
            immediate:true,
            handler (current) {

                // console.log('当前选择的', current)

                this.assFormtList = this.dealOrderInfo(current)
            }
        }
    },
    methods: {

        handlerFunc (type, row) {

            this.$emit('handleClick', type, row)

            // this.$goNext('/pages/info/index?id=' + row.id)

        },
        //处理数据
        dealOrderInfo (data) {

            return data.map(item => {

                let orderStatusStr = ''
                let orderIcon = ''

                //状态中文
                statusList.map(statusTtem => {

                    if (statusTtem.num <= item.orderStatus) {

                        orderStatusStr = statusTtem.name
                        

                    }
                    if( statusTtem.num == item.orderStatus){
                        orderIcon = statusTtem.icon
                    }   

                })

                // console.log('11111111111111',orderIcon)

                //快递图片
                if(item.orderExpressModelList && item.orderExpressModelList.length > 0){

                    item.orderExpressModelList.map(pItem => {
                        // pItem.expressPic = pItem.goodsPic ? $getImg(pItem.goodsPic) : undefined
                        pItem.pics = pItem.expressPic ? pItem.expressPic.split(';')[0]: errorExpressImg

                    })

                    if(item.orderExpressModelList[0].remark){
                        item.remark = item.orderExpressModelList[0].remark
                    }

                }

                item.appointDateStr = this.appointDateFunc(item)

                item.orderStatusStr = orderStatusStr
                item.orderIcon = orderIcon

                item.expressName = item?.orderExpressModelList[0]?.expressName


                return item

            })

        },
        //格式化预约时间
        appointDateFunc (json) {

            if (!json.dispatcherEndTime) {

                return ''
            }

            let appointDay = new Date(json.dispatcherEndTime).getDate();
            let today = new Date().getDate();

            let str = '';

            // console.log('1231231212222', appointDay , today )

            if (appointDay == today) {
                str = '今日 '
            }
            else if (appointDay == (today + 1)) {
                str = '明天 '
            }
            else if (appointDay == (today + 2)) {
                str = '后天 '
            }
            else {
                str = json.dispatcherEndTime.split(' ')[0] + ' '
            }

            str += parseTime(json.dispatcherStartTime, '{h}:{i}') + '-' + parseTime(json.dispatcherEndTime, '{h}:{i}')

            return str

        },

    }
}
</script>

<style scoped lang="scss">
.listBox {
    // padding: 20rpx 0rpx 0rpx;
    .i-list {
        background: #fff;
        padding: 30rpx 0rpx 6rpx 0rpx;
        border-radius: 20rpx;
        margin: 0 0 20rpx;
        box-shadow: 0 0 20rpx #eaeaea;
        .mark {
            padding: 0 32rpx;
            color: #333;
            font-size: 28rpx;
            // font-weight: bold;
            line-height: 1.2;
        }
        .content {
            position: relative;
            box-sizing: border-box;
            padding: 10rpx 30rpx;
            // min-height: 100rpx;
            .con-item{
                padding: 4rpx 0rpx 10rpx 0rpx;
                display: flex;
                align-items: center;
                border-bottom: 1rpx solid #fcfbff;
                &:last-child{
                    border: none;
                }
            }
        }
        .imgBox {
            width: 90rpx;
            height: 90rpx;
            line-height: 90rpx;
            overflow: hidden;
            background: #1287fa;
            border-radius: 10px;
            margin-right: 30rpx;
            color: #fff;
            image {
                width: 100%;
                height: 100%;
            }
            .ico{
                font-size: 80rpx;
            }
        }
        .right{
            flex: 1;
            width: 100%;
        }
    }
    .tname {
        font-size: 34rpx;
        color: #333;
        font-weight: bold;
        // margin-left: -30rpx;
        min-height: 60rpx;
        .name{
            display: inline-block;
            vertical-align: top;
            margin: 0 0px 6rpx 0rpx;
            // border-bottom:1rpx solid #eaeaea ;
            &:last-child{
                .hao{
                    display: none;
                }
            }
        }
    }
    .timeDate{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .icon{
            position: relative;
            top: 2rpx;
        }
    }
    .remark {
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #888;
    }
    .btns-box {
        text-align: right;
        padding: 20rpx 32rpx 20rpx;
        .btn {
            display: inline-block;
            text-align: right;
            padding: 10rpx 28rpx;
            border-radius: 50px;
            margin-left: 30rpx;
            font-size: 28rpx;
            background-color: #ffffff;
            color: #31aaf5;
            border: 1px solid #31aaf5;
        }
        .btn.update {
            color: #f0833b;
            border: 1px solid #f0833b;
        }
        .btn.report {
            color: #ff0000;
            border: 1px solid #ff0000;
        }
        .btn.cancel {
            color: #b9b9b9;
            border: 1px solid #b9b9b9;
        }
    }
}
</style>
